<template>
  <div
    v-loading="loading"
    class="borderDiv"
  >
    <el-row :gutter="10">
      <el-col :span="1">
        <el-button
          type="success"
          @click="addBtnClick"
          style="width:100%"
        >添加</el-button>
      </el-col>
      <el-col :span="4">
        <el-input v-model="tableDatas.filters.name">
          <template #prepend>地址</template>
        </el-input>
      </el-col>
    </el-row>

    <el-dialog
      v-model="dialogDatas.dialogFormVisible"
      :title="dialogDatas.isNew ? '添加':'修改'"
      top="5vh"
    >
      <el-scrollbar max-height="70vh">
        <el-form :model="dialogDatas.currentData">
          <el-form-item
            v-for="item in dialogDatas.formItems"
            :label="item.label"
          >
            <el-select
              v-model="dialogDatas.currentData[item.value]"
              v-if="item.isSelect"
            >
              <el-option
                v-for="optionItem in dialogDatas.formOptions[item.selectOptionsName]"
                :key="optionItem.value"
                :label="optionItem.label"
                :value="optionItem.value"
              />
            </el-select>

            <el-input
              v-else-if="!item.isDate"
              v-model="dialogDatas.currentData[item.value]"
            />
            <el-date-picker
              v-else
              v-model="dialogDatas.currentData[item.value]"
              type="date"
              placeholder="Pick a Date"
              format="YYYY/MM/DD"
              value-format="YYYY/MM/DD"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>

      <template #footer>
        <span>
          <el-button @click="dialogDatas.dialogFormVisible = false">取消</el-button>
          <el-button
            type="primary"
            @click="dialogDatas.confirmBtnClick"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-table
      class="marginTop10"
      :data="tableDatas.tableDatasAfterPage"
      stripe
      border
      empty-text="无数据"
    >
      <el-table-column
        v-for="column in tableDatas.tableColumns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >
        <template
          #default="scope"
          v-if="column.prop =='operate'"
        >
          <div>
            <el-button
              type="success"
              @click="tableDatas.editBtnClick(scope.row)"
            >修改</el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              title="确定删除该条记录?"
              @confirm="tableDatas.deleteBtnClick(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>

        <template
          #default="scope"
          v-else-if="column.prop =='SYB'"
        >
          <div>
            {{ dialogDatas.formOptions.sybOptions.find(item=>item.value == scope.row['SYB']).label  }}
          </div>
        </template>

        <template
          #default="scope"
          v-else-if="column.prop =='ADDRESS_LEVEL'"
        >
          <div>
            {{ dialogDatas.formOptions.djOptions.find(item=>item.value == scope.row['ADDRESS_LEVEL']).label  }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="marginTop10"
      @size-change="tableDatas.handleSizeChange"
      @current-change="tableDatas.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination>

  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';
import myAxios from '@/myAxios/myAxios';
import { showWarning } from '@/hooks/useMyMessageBox';
export default {
  name: 'psMaintain',
  setup () {
    let loading = ref(false);
    let addBtnClick = function () {
      showFormDialog();
    };

    let showFormDialog = function (row) {
      if (row) {
        dialogDatas.isNew = false;
        dialogDatas.currentData = { ...row };
      }
      else {
        dialogDatas.isNew = true;
        dialogDatas.currentData = {};
      }
      dialogDatas.dialogFormVisible = true;
    };

    let formOptionTexts = {
      //产品 -1:其他 1: 马达 2:电机 3:驱动器 4:阀 5:导轨 6:机械手 7:磁极 8:驱动器+泵 9:电机+泵 10:电机+驱动器+泵 11:泵 12:电线
      productOptionText: '其他,马达,电机,驱动器,阀,导轨,机械手,磁极,驱动器+泵,电机+泵,电机+驱动器+泵,泵,电线',
      //事业部 1: 安信事业部 2:精密 3:液压传动事业部 4:自动化科技
      sybOptionText: '安信事业部,精密,液压传动事业部,自动化科技',
      //车长 4.2，6.2，6.8，9.6，13，17.5
      clOptionText: '4.2,6.2,6.8,9.6,13,17.5',
      //件数 1车，2车，3车
      ccOptionText: '1车,2车,3车',
      //等级 省，市，区
      djOptionText: '省/市,市/区,市/区/县,乡/镇',
    };
    let dialogDatas = reactive({
      dialogFormVisible: false,
      currentData: {},
      isNew: false,
      formItems: [
        {
          "value": "ADDRESS",
          "label": "地址",
          "isDate": false
        },
        {
          "value": "SYB",
          "label": "事业部",
          "isDate": false,
          "isSelect": true,
          "selectOptionsName": 'sybOptions',
        },
        {
          "value": "PRICE",
          "label": "单价",
          "isDate": false
        },
        {
          "value": "ADDRESS_LEVEL",
          "label": "等级",
          "isDate": false,
          "isSelect": true,
          "selectOptionsName": 'djOptions',
        }
      ],
      formOptions: {
        sybOptions: formOptionTexts.sybOptionText.split(',').map((text, index) => {
          return {
            value: index + 1,
            label: text
          };
        }),
        djOptions: formOptionTexts.djOptionText.split(',').map((text, index) => {
          return {
            value: index,
            label: text
          };
        }),
      },
      confirmBtnClick: function () {
        loading.value = true;

        let currentData = dialogDatas.currentData;
        let params = `${currentData.ADDRESS}\t${currentData.SYB}\t${currentData.PRICE}\t${currentData.ADDRESS_LEVEL}`;
        params = params.replaceAll('undefined', '').replaceAll('null', '');

        myAxios.post('陈帅廷添加或修改配送中心配送单价', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '配送费提交成功!' + res
            });
            getTableDatas();
          }
          else {
            loading.value = false;
            showWarning('配送费更新失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('配送费更新失败err!' + err);
        });

      },
      cancelBtnClick: function () {

      }
    });

    let isMounted = true;
    let getTableDatas = function () {
      loading.value = true;

      let params = ``;
      myAxios.get('陈帅廷查询配送中心全部配送费', params).then(res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oritableData = res;
          if (!isMounted) {
            ElMessage({
              showClose: true,
              type: 'success',
              message: '配送费最新数据获取成功!'
            });
          }
          else {
            isMounted = false;
          }
        }
        else {
          loading.value = false;
          showWarning('配送费获取数据失败res!' + res);
        }
      }).catch((err) => {
        loading.value = false;
        showWarning('配送费获取数据失败err!' + err);
      });
    };

    onMounted(() => {
      getTableDatas();
    });

    let tableDatas = reactive({
      tableColumns: [
        {
          "prop": "ADDRESS",
          "label": "地址",
          "align": "center"
        },
        {
          "prop": "SYB",
          "label": "事业部",
          "align": "center"
        },
        {
          "prop": "PRICE",
          "label": "单价",
          "align": "center"
        },
        {
          "prop": "ADDRESS_LEVEL",
          "label": "等级",
          "align": "center"
        },
        {
          "prop": "operate",
          "label": "操作",
          "align": "center",
          "width": 170
        }
      ],
      oritableData: [
      ],
      filters: {
        name: ''
      },
      tableDatasAfterFilter: computed(() => {
        let data = tableDatas.oritableData;
        if (tableDatas.filters.name) {
          data = data.filter(item => item.ADDRESS.includes(tableDatas.filters.name));
        }
        return data;
      }),
      tableDatasAfterPage: computed(() => {
        let fData = tableDatas.tableDatasAfterFilter.slice((tableDatas.currentPage - 1) * tableDatas.pagesize, tableDatas.currentPage * tableDatas.pagesize);
        return fData;
      }),
      editBtnClick: function (row) {
        showFormDialog(row);
      },
      deleteBtnClick: function (row) {
        loading.value = true;

        let params = `${row.ADDRESS}\t${row.SYB}`;
        myAxios.post('陈帅廷删除配送中心配送单价', params).then(res => {
          if (res.includes('成功')) {
            loading.value = false;
            dialogDatas.dialogFormVisible = false;
            ElMessage({
              showClose: true,
              type: 'success',
              message: '配送费删除成功!' + res
            });
            tableDatas.oritableData.splice(tableDatas.oritableData.indexOf(row), 1);
          }
          else {
            loading.value = false;
            showWarning('配送费删除失败res!' + res);
          }
        }).catch((err) => {
          loading.value = false;
          showWarning('配送费删除失败err!' + err);
        });

      },

      currentPage: 1,
      pagesize: 10,
      handleSizeChange (val) {
        tableDatas.pagesize = val;
      },
      handleCurrentChange (val) {
        tableDatas.currentPage = val;
      }
    });

    return {
      loading,
      addBtnClick,
      dialogDatas,
      tableDatas
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
.borderDiv {
  border: 1px solid royalblue;
  padding: 10px 0px;
}
</style>

